import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"

//引入jquery类库
let userflag = true;
let telflag = true;
let passflag = true;
let repassflag = true;
//用户名或手机号码重复检测
class Registry {
    constructor() {
        this.validation();
    }

    //用户名或密码重复检测   
    checkname() {
        //重名检测
        $.ajax({
            type: 'post',
            url: 'http://10.31.163.57//gree/php/registry.php',
            data: {
                name: $('.user').val()
            },
            success: function(data) {
                if (data === 'false') {
                    $('form div>span').eq(0).css({
                        color: 'green'
                    }).html('√');
                    $('.user').parents('li').removeClass('error') //移除错误提示框
                    userflag = true;
                } else {
                    $('form div>span').eq(0).css({ color: 'red' }).html('用户名已存在');
                    $('.user').parents('li').addClass('error'); //添加错误提示框
                    userflag = false;
                }
            }
        })
    }

    //手机号码重复检测
    checktel() {

        $.ajax({
            type: 'post',
            url: 'http://10.31.163.57//gree/php/registry_checktel.php',
            data: {
                tel: $('.tel').val()
            },
            success: (data) => {
                if (data === 'false') {
                    $('form div>span').eq(1).css({
                        color: 'green'
                    }).html('√');
                    $('.tel').parents('li').removeClass('error') //移除错误提示框
                    telflag = true;
                } else {
                    $('form div>span').eq(1).css({
                        color: 'red'
                    }).html('手机号码已被注册')
                    $('.user').parents('li').addClass('error'); //添加错误提示框
                    telflag = false;
                }
            }
        })
    }

    //表单验证
    validation() {
        $('.user').on('focus', () => {
            $('form div>span').eq(0).css({ color: '#ccc' }).html('用户名须为6-18个字符，可使用字母、数字，需以字母开头');
        })

        //用户名验证:
        $('.user').on('blur', () => {
            if (/^[a-zA-Z](\w){5,17}$/.test($('.user').val())) {
                this.checkname();
            } else {
                if ($('.user').val().length === 0) { //判断格式出错后再将表单内容清空时才出现提示       
                    if ($('.user').parents('li').attr('class') === 'error') { //判断之前是否已经出错
                        $('form div>span').eq(0).css({ color: 'red' }).html('该项必须填写');
                    }
                } else {
                    $('form div>span').eq(0).css({ color: 'red' }).html('用户名须6-18个字符，可使用字母、数字，需以字母开头');
                    $('.user').parents('li').addClass('error'); //添加错误提示框
                }
                userflag = false;
            }
        })


        $('.tel').on('focus', () => {
            $('form div>span').eq(1).css({ color: '#ccc' }).html('请输入手机号码');
        })

        //手机号码验证:
        $('.tel').on('blur', () => {
            if (/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.test($('.tel').val())) {
                this.checktel();
            } else {
                if ($('.tel').val().length === 0) { //格式出错后将表单内容清空时提示
                    if ($('.tel').parents('li').attr('class') === 'error') { //判断之前是否已经出错
                        $('form div>span').eq(1).css({ color: 'red' }).html('该项必须填写');
                    }
                } else {
                    $('form div>span').eq(1).css({ color: 'red' }).html('请输入正确的手机号码');
                    $('.tel').parents('li').addClass('error'); //添加错误提示框
                }
                telflag = false;
            }
        })

        $('.pass').on('focus', () => {
            $('form div>span').eq(2).css({ color: '#ccc' }).html('密码必须由6-20位不含空格的字母，数字，和特殊符号两个以上组成');
        })

        //密码强度检测:
        $('.pass').on('input', () => {
            this.num = 0;
            if (/[a-z]/g.test($('.pass').val())) {
                this.num++;
            }
            if (/[A-Z]/g.test($('.pass').val())) {
                this.num++;
            }
            if (/[0-9]/g.test($('.pass').val())) {
                this.num++;
            }
            if (/[\W_]/g.test($('.pass').val())) {
                this.num++;
            }
            switch (this.num) {
                case 1:
                    $('form div>span').eq(2).css({ color: 'red' }).html('弱');
                    passflag = false;
                    break;
                case 2:
                case 3:
                    $('form div>span').eq(2).css({ color: 'orange' }).html('中');
                    passflag = true;
                    break;
                case 4:
                    $('form div>span').eq(2).css({ color: 'green' }).html('强');
                    passflag = true;
                    break;
            }
        })

        //密码格式检测:
        $('.pass').on('blur', () => {
            if (!/\s/g.test($('.pass').val())) { //密码不能含有空格和汉字
                if ($('.pass').val().length >= 6 && $('.pass').val().length <= 20) { //判断密码长度
                    if (passflag) {
                        $('form div>span').eq(2).css({
                            color: 'green'
                        }).html('√')
                        $('.pass').parents('li').removeClass('error') //移除错误提示框
                    }
                } else if ($('.pass').val().length === 0) { //格式已出错后将表单内容清空时提示
                    if ($('.pass').parents('li').attr('class') === 'error') { //判断之前是否已经出错
                        $('form div>span').eq(2).css({ color: 'red' }).html('该项必须填写');
                    }
                    passflag = false;
                } else {
                    $('form div>span').eq(2).css({ color: 'red' }).html('密码的长度必须为6-20位');
                    $('.pass').parents('li').addClass('error'); //添加错误提示框
                    passflag = false;
                }
            } else {
                $('form div>span').eq(2).css({ color: 'red' }).html('密码必须由不含空格的字母，数字，和特殊符号两个以上组成');
                $('.pass').parents('li').addClass('error'); //添加错误提示框
                passflag = false;
            }

            //如果确认密码框内已存在内容
            if ($('.repass').val().length !== 0) { //如果输入密码时第二次确认密码不为空
                if ($('.pass').val() === $('.repass').val()) { //需再次确认两次密码是否一致
                    $('form div>span').eq(3).css({ //如果一致则将确认密码打勾。
                        color: 'green'
                    }).html('√');
                    $('.repass').parents('li').removeClass('error');
                    repassflag = true;
                } else {
                    $('form div>span').eq(3).css({ color: 'red' }).html('两次密码输入不一致');
                    $('.repass').parents('li').addClass('error'); //添加错误提示框
                    repassflag = false
                }
            }
        })

        $('.repass').on('focus', () => {
            $('form div>span').eq(3).css({ color: '#ccc' }).html('请重新输入密码');
        })

        //第二次密码输入情况检测:

        $('.repass').on('blur', () => {
            if ($('.repass').val().length === 0) { //格式已出错后将表单内容清空时提示
                if ($('.repass').parents('li').attr('class') === 'error') { //判断之前是否已经出错
                    $('form div>span').eq(3).css({ color: 'red' }).html('该项必须填写');
                }
                repassflag = false;
            } else {
                if ($('.repass').val() === $('.pass').val()) {
                    $('form div>span').eq(3).css({
                        color: 'green'
                    }).html('√');
                    repassflag = true;
                } else {
                    $('form div>span').eq(3).css({ color: 'red' }).html('两次密码输入不一致');
                    $('.repass').parents('li').addClass('error'); //添加错误提示框
                    repassflag = false;
                }
            }
        })


        $('form').on('submit', () => { //提交时检测
            if (!$('.agreement input').prop("checked")) { //检测是否勾选协议
                alert('请阅读商城协议');
                return false;
            }
            if ($('.user').val() === '') { //检测用户是否为空
                $('form div>span').eq(0).css({ color: 'red' }).html('该项必须填写');
                userflag = false;
            }
            if ($('.tel').val() === '') { //检测手机是否为空
                $('form div>span').eq(1).css({ color: 'red' }).html('该项必须填写');
                telflag = false;
            }
            if ($('.pass').val() === '') { //检测密码是否为空
                $('form div>span').eq(2).css({ color: 'red' }).html('该项必须填写');
                passflag = false;
            }
            if ($('.repass').val() === '') { //检测确认密码是否为空
                $('form div>span').eq(3).css({ color: 'red' }).html('该项必须填写');
                repassflag = false
            }
            if (!userflag || !telflag || !passflag || !repassflag) {
                return false;
            }
        })
    }


}

export {
    Registry
}